<template>
  <view class="tabbar_box">
    <u-tabbar
      :value="value6"
      @change="change"
      :fixed="true"
      :placeholder="true"
      :safeAreaInsetBottom="true"
      :border="false"
      activeColor="rgba(96, 164, 247, 1)"
      inactiveColor="rgba(188, 188, 188, 1)"
    >
      <u-tabbar-item text="首页">
        <image
          class="u-page__item__slot-icon"
          slot="active-icon"
          src="@/static/tabbar/home-active.png"
        />
        <image
          class="u-page__item__slot-icon"
          slot="inactive-icon"
          src="@/static/tabbar/home.png"
        />
      </u-tabbar-item>
      <u-tabbar-item text="分类">
        <image
          class="u-page__item__slot-icon"
          slot="active-icon"
          src="@/static/tabbar/cate-active.png"
        />
        <image
          class="u-page__item__slot-icon"
          slot="inactive-icon"
          src="@/static/tabbar/cate.png"
        />
      </u-tabbar-item>
      <u-tabbar-item text="自动化" icon="play-right">
        <image
          class="u-page__item__slot-icon"
          slot="active-icon"
          src="@/static/tabbar/cart-active.png"
        />
        <image
          class="u-page__item__slot-icon"
          slot="inactive-icon"
          src="@/static/tabbar/cart.png"
        />
      </u-tabbar-item>
      <u-tabbar-item text="我的" icon="account">
        <image
          class="u-page__item__slot-icon"
          slot="active-icon"
          src="@/static/tabbar/user-active.png"
        />
        <image
          class="u-page__item__slot-icon"
          slot="inactive-icon"
          src="@/static/tabbar/user.png"
        />
      </u-tabbar-item>
    </u-tabbar>
  </view>
</template>
  
<script>
import store from "@/store";
export default {
  components: {},
  data() {
    return {
      value6: store.getters.currentTab || 0,
    };
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {},

  methods: {
    change(e) {
      this.value6 = e;
      //   store.commit("SET_CURRENT_TAB", e );
      store.dispatch("SetTabBar", e);
    },
  },
};
</script>
  
<style lang="scss" scoped>
.tabbar_box {
  .u-page__item__slot-icon {
    width: 37.534rpx;
    height: 35.045rpx;
  }
}
</style>
  